<template>
  <!-- 分享弹窗 -->
  <div>
    <h-modal class="share-modal" :loading="loading" v-model="show" title="分享" @submit="$emit('submit')">
      <div id="share-modal">
        <slot>
          <div class="share-dark-card" id="share-dark-card">
            <a-row type="flex" justify="space-between">
              <a-col :span="12">事件名称：台风烟花事件</a-col>
              <a-col class="t-right " :span="12">事件发生时间：2022-02-10  09:05:42</a-col>
              <a-col :span="24" style="margin-top: 16px">
                <div class="ellipsis-2">
                  事件描述：详细内容：为避免台风名称的混乱，1997年11月25日-12月1日，有关国家和地区在香港举行的世界气象组织（简称WMO）台风委员会
                  第30次会议上决定规范台风的命名，其中，西北太平洋和南海的热带气旋，采用具有亚洲风格的名字命名......
                </div>
              </a-col>
              <a-col :span="24" style="margin-top: 16px">
                <div>
                  发展进度：
                </div>
                <div v-if="showbar">
                  <a-slider tooltipVisible :getTooltipPopupContainer="getTooltipPopupContainer" :tipFormatter="tipFormatter" id="test" v-model="percent" />
                </div>
              </a-col>
              <a-col :span="24" style="margin-top: 60px">
                <div class="share-tag">
                  <div v-for="(item, i) in tag" :key="i">
                    <p>{{ item.value }}</p>
                    <p>{{ item.title }}</p>
                  </div>
                </div>
              </a-col>
              <a-col :span="24" style="margin-top: 50px">
                <a-row>
                  <a-col :span="14">
                    <div class="swiper-container swiper">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <p>用户名XXXXX</p>
                          <p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
                        </div>
                        <div class="swiper-slide">
                          <p>用户名XXXXX</p>
                          <p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
                        </div>
                        <div class="swiper-slide">
                          <p>用户名XXXXX</p>
                          <p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
                        </div>
                        <div class="swiper-slide">
                          <p>用户名XXXXX</p>
                          <p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
                        </div>
                      </div>
                      <div class="swiper-scrollbar"></div>
                    </div>
                  </a-col>
                  <a-col :span="10">
                    <div style="height: 300px;margin-top: -50px;">
                      <Pie />
                    </div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
          <br>
          <a-form-model :model="form" size="large">
            <a-row :gutter="100">
              <a-col :span="12">
                <a-form-model-item label="审核人">
                  <a-select v-model="form.review">
                    <a-select-option value="1">审核人1</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="链接">
                  <a href="1&rsv_iqid=0xce4fdd590005c275&issp=1&f=8&rsv_bp=ba" target="_blank">1&rsv_iqid=0xce4fdd590005c275&issp=1&f=8&rsv_bp=ba</a>
                </a-form-model-item>
              </a-col>
            </a-row>

          </a-form-model>
        </slot>
      </div>
    </h-modal>
    <a-modal v-model="showInput" title="填写分享信息" @ok="submitPdf">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
        <a-row :gutter="0">
          <a-col :span="24">
            <a-form-model-item label="密码" prop="password">
              <a-input type="password" v-model="form.password" placeholder="请输入分享文件密码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="确认密码" prop="confirmPassword">
              <a-input type="password" v-model="form.confirmPassword" placeholder="请输入分享文件密码"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="水印描述" :prop="modelName.includes('无须填写分享水印')?'':'watermark'">
              <a-input v-model="form.watermark" placeholder="请输入水印描述"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="姓名">
              {{ userInfo.realName }}
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号">
              {{ userInfo.username }}
            </a-form-model-item>
          </a-col> -->

        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
import Swiper from 'swiper';
import { addressList, addEventSharePdf, WatermarkDescription } from '@/api/serve';
import Pie from './charts/Pie/Index';
// eslint-disable-next-line no-unused-vars
import { downLoadPDF, downloadFileUrl } from '@/utils/common';
import { mapState } from 'vuex';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  components: {
    Pie
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal(val) {
      this.show = val;
      if (val) {
        // this.$nextTick(() => {
        //   this.swiperInit();
        //   this.showbar = true;
        // });
        // WatermarkDescription().then(res => {
        //   this.form.watermark = res.watermark;
        // });
      }
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  computed: {
    ...mapState({
      modelName: state => state.user.modelName,
      userInfo: state => state.user.userInfo
    })
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('密码不一致'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      moment,
      show: false,
      showInput: false,
      showbar: false,
      form: {
        watermark: ''
      },
      percent: 10,
      tipFormatter: () => '起步',
      getTooltipPopupContainer: () => {
        return document.getElementById('share-dark-card');
      },
      tag: [
        {
          title: '舆情指数',
          value: 28198
        },
        {
          title: '新闻',
          value: 143
        },
        {
          title: 'APP',
          value: 34
        },
        {
          title: '论坛',
          value: 38
        },
        {
          title: '纸媒',
          value: 0
        },
        {
          title: '微博',
          value: 6684
        },
        {
          title: '微信',
          value: 52
        },
        {
          title: '博客',
          value: 0
        },
        {
          title: '问答',
          value: 23
        },
        {
          title: '视频',
          value: 2
        },
        {
          title: '评论',
          value: 14252
        }

      ],
      rules: {
        password: [{ required: true, message: '请输入' }],
        confirmPassword: [{ required: true, validator: validatePass }],
        watermark: [{ required: true, message: '请输入' }]
      },
      messageLoading: ''
    };
  },
  mounted() {
    this.$nextTick(() => {

    });
  },
  methods: {
    showMark(dom, time = 0) {
      this.messageLoading = this.$message.loading({
        content: '正在分享，请稍后...',
        duration: 0
      });
      const s = setTimeout(() => {
        WatermarkDescription().then(res => {
          console.log(this.modelName);
          this.form.watermark = this.modelName.includes('无须填写分享水印') ? '' : res.watermark;
        });
        this.submit(dom);
        clearTimeout(s);
      }, time);
    },
    getList(params) {
      addressList().then(res => {
        this.config.dataSource = res.data.list;
      });
    },
    select(e) {
      console.log(e);
    },
    swiperInit() {
      // eslint-disable-next-line no-unused-vars
      const mySwiper = new Swiper('.swiper', {
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 3,
        loop: true,
        autoplay: {
          disableOnInteraction: false
        }
      });
    },
    submit(dom = 'share-modal') {
      console.log('sumit');
      this.loading = true;
      const s = setTimeout(() => {
        clearTimeout(s);
        downLoadPDF(dom, new Date().getTime(), 'upload-auto').then(res => {
          this.form.shareLink = res.imgUrl;
          this.showInput = true;
          this.messageLoading();
        }).finally(() => {
          this.loading = false;
        });
      }, 300);
    },
    submitPdf() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = { ...this.form };
          delete form.confirmPassword;
          addEventSharePdf({
            ...form,
            eventId: this.id
          }).then(res => {
            const h = this.$createElement;
            this.$info({
              title: '分享PDF地址',
              content: h('div', {}, [
                  h('a', {
                    attrs: {
                      target: '_blank',
                      href: res.filePath
                    }
                  }, res.filePath)
                ])
              });
              this.$emit('finish', '');
              this.$message.success('分享成功');
              this.showInput = false;
              this.show = false;
            // // downloadFileUrl(res.filePath, res.filePath.substring(res.filePath.lastIndexOf('.'), res.filePath.length));
            // addEventShare({ eventId: this.id }).then(res => {
            //   this.$message.success('分享成功');
            //   // this.$emit('submit', '');
            //   this.$emit('finish', '');
            //   this.showInput = false;
            //   this.show = false;
            // }).finally(() => {
            //   this.loading = false;
            //   this.$emit('finish', '');
            // });
          }).finally(() => {
              this.loading = false;
              this.$emit('finish', '');
            });
        } else {
          console.log('error submit!!');
          this.$emit('finish', '');
          this.loading = false;
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less">
  .share-modal{
    .h-modal-card-cnt {
      height: auto;
    }
    .h-modal-card {
      height: auto;
    }
  }
  .share-dark-card {
    width: 100%;
    // height: 200px;
    background: #020A22;
    box-shadow: 0px 6px 68px 12px rgba(0,0,0,0.0700);
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    padding: 24px 30px;
    box-sizing: border-box;
    line-height: 1.4;
    position: relative;
    .t-right {
      text-align: right;
    }
    span.big {
      font-size: 20px;
    }
    .ant-slider {
      pointer-events: none;
      margin-top: 20px;
    }
    .ant-slider-rail {
      height: 14px;
      background: #152966;
      border-radius: 30px;
    }
    .ant-slider-track {
      height: 14px;
      background: #0F60D9;
      border-radius: 30px;
    }
    .ant-slider-handle {
      width: 41px;
      height: 41px;
      background: rgba(15, 96, 217, 0.32);
      box-shadow: none;
      top: -6px;
      border: none;
      // border: 6px solid rgba(15, 96, 217, 0.32);
      &::before {
        content: ' ';
        position: absolute;
        width: 25px;
        height: 25px;
        background: #0F60D9;
        border-radius: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .ant-tooltip-inner {
      min-height: 20px !important;
      font-size: 18px;
      background: none;
      box-shadow: none;
      margin-bottom: -14px;
    }

    .share-tag {
      display: flex;
      justify-content: space-between;
      >div {
        text-align: center;
        p {
          margin: 0;
        }
        >p:first-child {
          font-size: 29px;
          font-weight: 600;
          color: #5DA2F4;
          line-height: 1;
        }
        >p:last-child {
          font-size: 17px;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 1;
          margin-top: 15px;
        }
      }
    }
    .swiper {
      height: 160px;
      // border: 1px solid red;
    }
    .swiper-slide {
      p{
        margin: 0;
      }
      >p:first-child {
        font-size: 16px;
        font-weight: 400;
        color: #5FA5F8;
        line-height: 1;
      }
      >p:last-child {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        margin-top: 10px;
        line-height: 1;
        padding-bottom: 4px;
        border-bottom: 1px solid #fff;
        display: inline-block;
      }
    }
  }
</style>
